<template>
    <el-dialog v-model="show" title="工序录入" width="35%" align-center @close="handleClose">

        <el-form :model="form" label-width="auto">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="计价方式：">
                        <el-select clearable placeholder="Select">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工序名称：">印刷</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="供应商：">
                        <el-select clearable placeholder="Select">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结算方式：">货到付款</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="本次完成量：">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纸张信息：">350g*889mm*500mm</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="总金额："></el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上道工序完成数量：">9500张</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注：">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="mt20" style="display: flex; align-items: center; justify-content: space-between;">
            <div style="color: #F76F62;">一旦保存无法修改或删除，
                请务必仔细核对相关信息</div>
                <el-checkbox label="此工序完结" />
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">保 存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });


const handleSubmit = async () => {
    proxy?.$modal.msgSuccess('操作成功');
    emits('submit', true);

    handleClose();
};

const form = reactive({
    name: '',
})


const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
::v-deep .is-bordered-label {
    background-color: #FFFFFF !important;
}
</style>